const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path')
module.exports = {
    mode: 'none',
    // 指定入口文件（最终输出为main.js)
    entry:{
        home:'./src/index.js'
    },
    // 指定输出目录
    output:{
        path:path.join(__dirname,'./dist'),
        // filename:输出文件名
        filename:'build.js'

    },
    // 开发服务器（必须安装webpack-dev-server） 自动刷新服务器
    devServer:{
        hot :true ,
        // 后端允许多少端口port这里改就可以访问
        port:9090 ,
        proxy:{
            '/api':{
                target: 'http://localhost:9090', 
            }
        }
    },
    module:{
        rules:[
            {
                test:/\.s[ac]ss$/,
                use:['style-loader','css-loader','sass-loader']
            },

            //图片加载器
            {
                test:/\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
                use:{
                    loader:'url-loader',
                    options: {
                        // 如图片小于limit大小，则使用base64
                        // 如图片大于limit大小，则使用url地址
                        limit: 10000, // 10k 
                        name: 'img/[name].[hash:5].[ext]'
                    }
                }
            }
        ]
    },
    
    // plugins插件：处理loader之外的一些自动化操作
    plugins:[
        // 自动生成html文件
        new HtmlWebpackPlugin({
            // 指定模板生成html文件 在dis目录下
            template:'./src/index.html'
        }),
        // 自动清除输出目录 （注意上面的output）
        new CleanWebpackPlugin(),



    ]

   

}